<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>初识vue</title>
</head>
<body>
  <!-- 
      1.vue 中的数据代理
       通过vm对象来代理data中对象的读写操作
      2.好处 更加方便的操作data中的数据
      3.基本原理
        通过Object.defineproperty() 把data中的所有属性添加到vm上,
        为每一个添加到vm上的属性都添加getter 和setter,
        在getter/setter 内部去操作(读/写)data中对应的属性值


   -->
  <div id = 'root'>
    <h1>hello, {{ _data.name }}</h1>
    <h1>{{ _data.address }}</h1>
  </div>
  <script type="text/javascript" src="../js/vue.js"></script>
<script>
  
  Vue.config.productionTip = false
  data = {
      name: '海绵宝宝',
      address: '蚌埠'
    }
  const vm = new Vue({
    el: '#root',
    data
  });
  console.log(vm);
</script>
</body>
</html>